<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="step1" v-if="!bottomShow && !step">
			<image class="image" src="../../static/img/tabbar/ai.png" alt=""></image>
			<view class="title">正在准备竞赛题...</view>
			<view class="people">已有1000学员等待中</view>
		</view>
		<view class="stpes_top" v-if="!bottomShow && step">
			<view class="stpes_top_title">已完成{{ total }}道题</view>
			<view class="stpes_top_title">{{ step + '/' + total }}</view>
			<view class="per" :style="{ width: ((step - 1) / total) * 100 + '%' }"></view>
		</view>

		<view class="contents" v-if="!bottomShow && step">
			<view class="title">
				[ 主观题 ] - [ {{ list[step - 1].type }} ]
			</view>
			<view class="label">
				{{ step }}.{{ list[step - 1].name }}
			</view>
			<!-- 单选 多选 判断 -->
			<view class="value"
				v-if="list[step - 1].type == '单选' || list[step - 1].type == '多选' || list[step - 1].type == '判断'">
				<view class="div_view" v-for="(item, index) in list[step - 1].answer" :key="index"
					@click="() => { radioClick(optionList[index], list[step - 1].max, list[step - 1].type) }"
					:style="{ backgroundColor: conputedColor(optionList[index]) }">
					<view class="value_option">
						{{ optionList[index] }}
					</view>
					<view class="titles">
						{{ item }}
					</view>
				</view>
			</view>
			<!-- 简答 -->
			<view class="value" v-if="list[step - 1].type == '简答'">
				<u--textarea height="180" placeholder="请输入答案" maxlength="-1" @input="inputChange"></u--textarea>
			</view>

			<view class="buttons" @click="submit">
				下一题
			</view>

		</view>

		<view class="step1" v-if="bottomShow">
			<image class="image" src="../../static/img/tabbar/ai.png" alt=""></image>
			<view class="title">答题时间：{{ timeConsuming }}</view>
			<view class="people">谢谢你参加竞赛，我们将于{{ publishTime }}号公布结果，敬请期待</view>
			<view class="buttons" @click="goto">
				查看竞赛
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '../../utils/mixin'
	import {
		competitionnStart,
		competitionnFinish
	} from '@/api/index.js'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				list: [{
						type: '填空',
						question: '恐龙生活在什么年代填空',
					},
					{
						type: '单选',
						question: '恐龙生活在什么年代',
						answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
						max: 1
					},
					{
						type: '多选',
						question: '恐龙生活在什么年代多选',
						answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
						max: 3
					},
				],
				optionList: [
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'
				],
				step: 1,
				total: 0,
				// 作答答案
				answerList: [],
				bottomShow: false,
				// 公布结果时间
				publishTime: '',
				creatTime: '',
				// 耗时
				timeConsuming: ''
			}
		},
		onLoad(options) {
			// 状态栏高度
			this.getSystemInfo();
			// 获取所有题目
			this.getpracticeList(options.id);
		},
		onShow() {

		},
		methods: {
			conputedColor(item) {
				return this.answerList[this.step - 1].includes(item) ? 'rgb(233,241,244)' : ''
			},
			// 获取所有练习题目
			async getpracticeList(id) {
				const res = await competitionnStart({
					id: id
				})
				this.creatTime = new Date().getTime()
				res.data.rows.forEach((item) => {
					item.value = item.id
					if (item.type == '单选' || item.type == '多选') {
						item.answer = [item.optionA, item.optionB, item.optionC, item.optionD]
						if (item.type == '单选') {
							item.max = 1
						}
						if (item.type == '多选') {
							item.max = 4
						}
					} else if (item.type == '判断') {
						item.answer = ['正确', '错误']
						item.max = 1
					}
				})
				this.typeColumns = [res.data.rows]
				this.list = res.data.rows
				this.answerList = new Array(res.data.total).fill([])
				this.total = res.data.total
			},
			// 单选事件
			radioClick(item, max, type) {
				// 再次点击取消
				if (this.answerList[this.step - 1].includes(item)) {
					const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
					const indexs = list.indexOf(item)
					list.splice(indexs, 1)
					this.answerList.splice(this.step - 1, 1, list)
				} else {
					// 选择的最大阈值
					if (this.answerList[this.step - 1].length < max) {
						const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
						list.push(item)
						this.answerList.splice(this.step - 1, 1, list)
					}
				}
			},
			// 输入框事件
			inputChange(e) {
				this.answerList.splice(this.step - 1, 1, e)
			},
			// 下一题
			async submit() {
				// 不是最后一题的时候
				if (this.step != this.total) {
					// 有选项的时候
					if (this.answerList[this.step - 1].length > 0) {
						this.step = this.step + 1
					}
				} else {
					const list = []
					this.answerList.forEach((item, index) => {
						list.push({
							codeId: this.list[index].codeId,
							questionId: this.list[index].id,
							userAnswer: this.list[index].type == '判断' ? (item.join(',') == 'A' ? '正确' : '错误') : this.list[index].type == '简答' ? item : item.join(',')
						})
					})
					const res = await competitionnFinish(list)
					const times = new Date().getTime()
					this.timeConsuming = this.formatTime(times - this.creatTime)
					this.publishTime = res.data.publishTime.split(' ')[0]
					this.bottomShow = true
				}
			},
			formatTime(ms) {
				const totalSeconds = Math.floor(ms / 1000);
				const minutes = Math.floor(totalSeconds / 60);
				const seconds = totalSeconds % 60;
				return `${minutes}分${seconds}秒`;
			},

			// 查看竞赛
			goto() {
				uni.navigateTo({
					url: "/subpackage3/competition/competition"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		.step1 {
			padding-top: 200rpx;
			box-sizing: border-box;
			text-align: center;

			.image {
				width: 190rpx;
				height: 190rpx;
			}

			.title {
				margin-top: 20rpx;
			}



			.people {
				width: 300rpx;
				margin-top: 20rpx;
				color: rgb(179, 173, 173);
				font-size: 30rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}
		}

		.contents {
			box-sizing: border-box;
			padding: 0 40rpx;

			.title {
				color: #03a9f4;
				margin-top: 80rpx;
				font-size: 30rpx;
			}

			.label {
				font-weight: 500;
				font-size: 36rpx;
				margin-top: 80rpx;
			}

			/deep/.u-textarea {
				margin-top: 80rpx;
			}

			.value {
				display: flex;
				width: 100%;
				align-items: center;
				font-size: 36rpx;
				box-sizing: border-box;
				flex-wrap: wrap;

				.value_option {
					margin-right: 40rpx;
					border: 1px solid;
					width: 34rpx;
					height: 34rpx;
					font-size: 32rpx;
					text-align: center;
					line-height: 34rpx;
					background-color: #fff;
					border-radius: 50%;
					margin-left: 40rpx;
				}

				.div_view {
					width: 100%;
					display: flex;
					align-items: center;
					height: 60rpx;
					margin-top: 40rpx;
				}
			}



		}

		.buttons {
			margin: 100rpx auto 0;
			width: 400rpx;
			height: 80rpx;
			background-color: rgba(34, 175, 229);
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 10rpx;
			letter-spacing: 20rpx;
		}

		.stpes_top {
			width: 100%;
			height: 70rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: 500;
			box-sizing: border-box;
			padding: 0 40rpx;
			position: relative;

			.stpes_top_title {
				position: relative;
				z-index: 2;
			}

			.per {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				height: 100%;
				background-color: rgb(159, 219, 255);
			}
		}
	}
</style>